"use client"

import Link from "next/link"

import { Gem } from "lucide-react"
import { useLanguage } from "@/context/language-context"

export function Footer() {
  const { dictionary } = useLanguage()

  return (
    <footer className="bg-gray-900 text-gray-300 py-8 dark:bg-gray-950">
      <div className="container mx-auto px-4 md:px-6 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
        <div className="flex items-center gap-2">
          <Gem className="w-6 h-6 text-gray-400" />
          <span className="text-lg font-semibold">{dictionary.siteName}</span>
        </div>
        <nav className="flex flex-wrap justify-center gap-4 md:gap-6 text-sm">
          <Link href="/" className="hover:text-white transition-colors">
            {dictionary.home}
          </Link>
          <Link href="/products" className="hover:text-white transition-colors">
            {dictionary.products}
          </Link>
          <Link href="/collections" className="hover:text-white transition-colors">
            {dictionary.collections}
          </Link>
          <Link href="/about" className="hover:text-white transition-colors">
            {dictionary.about}
          </Link>
          <Link href="/blog" className="hover:text-white transition-colors">
            {dictionary.blog}
          </Link>
          <Link href="/contact" className="hover:text-white transition-colors">
            {dictionary.contact}
          </Link>
        </nav>
        <p className="text-sm text-gray-500 dark:text-gray-400">
          &copy; {new Date().getFullYear()} {dictionary.siteName}. {dictionary.allRightsReserved}
        </p>
      </div>
    </footer>
  )
}
